<template>
  <div class="LpjTableVue">
    <el-table
        ref="LpjTableVue"
        :data="tableData"
        :header-cell-class-name="tabelHeaderClassFn"
        :row-key="getRowKey"
        border
        :fit="true"
        @filter-change="handleFilterChange"
        @select-all="selectAllFn" @selection-change="selectionChangeFn" @select="handleSelectionChange"
        empty-text = "—— 暂无数据 ——"
    >
        <template v-for="(item,index) in tableHeaderData">
            <!-- 单选框 -->
            <el-table-column
               :key="item.key||index"
                type="selection"
                v-if="item.hasCheckBox"
                width="55">
            </el-table-column>
            <!-- <el-table-column
                :key="item.key||index"
                v-if="item.hasCheckBox"
                type="selection"
                :selectable='checkboxT'
                :disabled='false'
                width="55"
                :reserve-selection="item.saveSelection?true:false">
            </el-table-column> -->
            <!-- 刷选 -->
            <el-table-column 
                :key="index"
                v-else-if="item.hasOwnProperty('filters')"
                :prop="item.prop"
                :label="item.label"
                align='center'
                :width="item.width"
                :show-overflow-tooltip="true"
                :sortable="item.sortable"
                :sort-by="item.prop"
                :filters="item.filters"
                :filter-method="filterMethodFn"
                :column-key="item.prop"
                >
                <template slot-scope="scope">
                    <div class="filtersClass">
                        <span class="assetStatusClass" v-if="item.prop=='asset_status_name'&&scope.row[item.prop]&&scope.row[item.prop]!=''" :style="{color:scope.row.color?scope.row.color:'#FF66B1'}">•</span>
                        <span class="filtersClassBoxWord">{{scope.row[item.prop]}}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column 
                :key="index"
                v-else
                :prop="item.prop"
                :label="item.label"
                :width="item.width"
                align='center'
                :min-width="item.minWidth"
                :show-overflow-tooltip="item.prop!='departmentList'&&(item.prop.indexOf('linkOperate')==-1)&&item.prop!='assetsEncoding'?true:false"
                :sortable="item.sortable"
                :sort-by="item.prop"
                >
                <template slot-scope="scope">
                    <!-- 显示图片 -->
                    <div v-if="item.prop=='img'||item.prop=='image'||item.prop=='image_url'||item.prop=='main_images'" class="tableImgClass"> 
                        <el-popover
                            placement="right" 
                            width="240"
                            style="height: 240px;"
                            trigger="hover"
                            >
                            <img width="100%"  height="240" :src="scope.row[item.prop]||assetsNo"/>
                            <div slot="reference" class="tableImg"> <img style="margin-top:10px" width="20px" height="20px" :src="scope.row[item.prop]||assetsNo"  alt=""/></div>
                        </el-popover>
                    </div>
                    <!-- 二维码 -->
                    <div v-else-if="item.prop=='f_qrcode'"  class="tableImgClass" >
                        <el-popover  placement="right" width="260" style="height: 260px;" trigger="hover" :disabled="isdisabled!=scope.row.id" >
                            <img width="240px"  height="240px" :src="qrCode"/>
                            <div slot="reference" > 
                                <img :src="qrcodeImg" width="20px" @click="getQrcode(scope.row.id)" height="20px" style="cursor:pointer;margin-top:10px" alt=""/>
                            </div>
                        </el-popover>
                    </div>
                    <!--序号 -->
                    <div v-else-if="item.prop=='sortNum'">{{baseNum+scope.$index+1}}</div>
                    <!-- 显示操作  -->
                    <div v-else-if="item.prop=='linkOperate'">
                        <el-link :underline="false" type="primary" v-for="(opt,i) in item.linkList" :key="i"  @click="linkBtnFn(opt.label,scope.row)" >
                            <div class="popoverDiv" style="overflow:hidden" >
                                <span>{{opt.label}}</span>
                                <span v-if="i<item.linkList.length-1" style="color:#E9E9E9;padding-left:5px">|</span>
                            </div>
                        </el-link>
                    </div>
                    <!--我的资产-资产列表（操作） -->
                    <div v-else-if="item.prop=='linkOperateOfAssetsList'">
                        <el-dropdown @command="(params)=>{linkBtnFn(params,scope.row)}" trigger="click">
                            <span class="el-dropdown-link">
                                更多操作<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <!-- @click="linkBtnFn(index==2&&scope.row.is_show==2?'上架':item.label,scope.row)" -->
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item v-for="(item,index) in item.linkList" :key="index"  :command="item.label">{{index==2&&scope.row.is_show==2?'上架':item.label}}</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <!--我的资产-报修记录（操作） -->
                    <div v-else-if="item.prop=='linkOperateOfMyRepaire'">
                        <el-dropdown @command="(params)=>{linkBtnFn(params,scope.row)}" trigger="click">
                            <span class="el-dropdown-link">
                                更多操作<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <!-- @click="linkBtnFn(index==2&&scope.row.is_show==2?'上架':item.label,scope.row)" -->
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item v-for="(item,index) in item.linkList" :key="index"  :command="item.label">{{index==2&&scope.row.is_show==2?'上架':item.label}}</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <!-- 我的资产-报修记录(状态) -->
                    <div v-else-if="item.prop=='rp_status_name'" :class="{color1:scope.row.rp_status==1,color2:scope.row.rp_status==2,color3:scope.row.rp_status==3,color4:scope.row.rp_status==4}">{{scope.row[item.prop]}}</div>
                   
                    <!--我的资产-转移记录（操作） -->
                    <div v-else-if="item.prop=='linkOperateOfMytransfer'">
                        <el-dropdown @command="(params)=>{linkBtnFn(params,scope.row)}" trigger="click">
                            <span class="el-dropdown-link">
                                更多操作<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <!-- @click="linkBtnFn(index==2&&scope.row.is_show==2?'上架':item.label,scope.row)" -->
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item v-for="(item,index) in item.linkList" :key="index"  :command="item.label">{{index==2&&scope.row.is_show==2?'上架':item.label}}</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>

                    <!--我的资产-退还记录||我的资产-报失记录（操作） -->
                    <div v-else-if="item.prop=='linkOperateOfReturnRecord'">
                        <div  v-if="scope.row.rp_status==2">
                           <span style="color: rgba(116, 206, 87, 1);">已撤销</span>
                           <el-link  :underline="false" type="primary"  @click="linkBtnFn('删除',scope.row)" >删除</el-link>
                        </div>
                        <div  v-else-if="scope.row.rp_status==4">
                            <span style="color: rgba(116, 206, 87, 1);">待管理员确认</span>
                           <el-link  :underline="false" type="primary"  @click="linkBtnFn('撤销',scope.row)" >撤销</el-link>
                        </div>
                        <div  v-else>
                            <span style="color: rgba(116, 206, 87, 1);">退还完成</span>
                        </div>
                    </div>
                    <div v-else-if="item.prop=='linkOperateLossRecord'">
                        <div  v-if="scope.row.rp_status==2">
                           <span style="color: rgba(116, 206, 87, 1);">已撤销</span>
                           <el-link  :underline="false" type="primary"  @click="linkBtnFn('删除',scope.row)" >删除</el-link>
                        </div>
                        <div  v-else-if="scope.row.rp_status==4">
                            <span style="color: rgba(116, 206, 87, 1);">待管理员确认</span>
                           <el-link  :underline="false" type="primary"  @click="linkBtnFn('撤销',scope.row)" >撤销</el-link>
                        </div>
                        <div  v-else>
                            <span style="color: rgba(116, 206, 87, 1);">报失完成</span>
                        </div>
                    </div>
                    <!--维修任务（操作） -->
                    <div v-else-if="item.prop=='linkOperateOfRepaire'">
                        <div v-if='scope.row.rp_status==4'>
                            <span>已撤销</span> 
                        </div>
                        <div  v-else-if="scope.row.rp_status==1">
                            <span class="color1" style="cursor:pointer"  @click="linkBtnFn('待确认',scope.row)">请确认</span>
                            <span style="color:#E9E9E9;padding:0 5px">|</span>
                            <el-link  :underline="false" type="primary"  @click="linkBtnFn('详情',scope.row)" >详情</el-link>
                        </div>        
                        <div  v-else>
                            <span :class="{color1:scope.row.rp_status==2}">{{scope.row.rp_status==2?'维修中':'维修完成'}}</span>
                            <span style="color:#E9E9E9;padding:0 5px">|</span>
                            <el-link  :underline="false" type="primary"  @click="linkBtnFn('详情',scope.row)" >详情</el-link>
                            <span style="color:#E9E9E9;padding:0 5px">|</span>
                            <el-link  :underline="false" type="primary"  @click="linkBtnFn('填写维修记录',scope.row)" >填写维修记录</el-link>
                        </div>
                    </div>
                    <!-- 资产管理--资产列表（操作）  -->
                    <div v-else-if="item.prop=='linkOperateOfAssetsList'">
                        <!-- <el-link :underline="false" type="primary" v-for="(opt,i) in item.linkList" :disabled="(((i>0)&&(i<4))&&scope.row.f_status>1)||(i==4&&(scope.row.f_status==2))" :key="i"  @click="linkBtnFn(opt.label,scope.row)" >
                            <div class="popoverDiv" style="overflow:hidden" >
                                <span>{{opt.label}}</span>
                                <span v-if="i<item.linkList.length-1" style="color:#E9E9E9;padding-left:5px">|</span>
                            </div>
                        </el-link> -->
                        <el-dropdown @command="(params)=>{linkBtnFn(params,scope.row)}" trigger="click">
                            <span class="el-dropdown-link">
                                更多操作<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item v-for="(item,index) in item.linkList" :key="index" :command="item.label" v-show="isShowFn(scope.row.f_status,item.key)">{{item.label}}</el-dropdown-item>
                                <!-- @click="linkBtnFn(item.label,scope.row)" -->
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <div v-else-if="item.prop=='f_status_name'" :class="{color3:scope.row.f_status==1,color1:scope.row.f_status>2}">{{scope.row[item.prop]}}</div>
                    
                    <!--资产管理--领用申请（操作） -->
                    <div v-else-if="item.prop=='linkOperateOfGet'">
                        <div v-if='scope.row.re_status>2'>
                            <span :class="{color3:scope.row.re_status==3}">{{scope.row.re_status_name}}</span> 
                        </div>
                        <div  v-else>
                            <span :class="{color1:scope.row.re_status==1}">{{scope.row.re_status==1?'待审批':'已审批'}}</span>
                            <span style="color:#E9E9E9;padding:0 5px">|</span>
                            <el-link  :underline="false" type="primary" :disabled="scope.row.re_status==1"  @click="linkBtnFn('请确认',scope.row)" >{{'请确认'}}</el-link>
                        </div>
                    </div>
                    <!--资产管理--转移申请（操作） -->
                    <div v-else-if="item.prop=='linkOperateOfTransfer'">
                        <div v-if='scope.row.ts_status==4'>
                            <span>{{'已撤销'}}</span> 
                        </div>
                        <div v-else-if='scope.row.ts_status==1'>
                            <span :class="{color1:scope.row.ts_status==1}">{{'待接收人同意'}}</span> 
                        </div>
                        <div  v-else>
                            <span >{{'接收人已同意'}}</span>
                            <span style="color:#E9E9E9;padding:0 5px">|</span>
                            <span v-if='scope.row.ts_status==3'>管理员已确认</span>
                            <el-link v-else :underline="false" type="primary"  @click="linkBtnFn('请确认',scope.row)" >{{'请管理员确认'}}</el-link>
                        </div>
                    </div>
                    
                    <!--资产管理--退还或报失 申请（操作） -->
                    <div v-else-if="item.prop=='linkOperateOfCom'"> 
                        <div v-if='scope.row[item.statuName]==3'>
                            <span>{{'已撤销'}}</span> 
                        </div>
                        <div  v-else>
                            <span v-if='scope.row[item.statuName]==2'>已确认</span>
                            <el-link v-else :underline="false" type="primary"  @click="linkBtnFn('请确认',scope.row)" >{{'请确认'}}</el-link>
                        </div>
                    </div>
                    <!--资产管理--转移仓（操作） -->
                    <div v-else-if="item.prop=='linkOperateOftransferWare'"> 
                        <div v-if='scope.row.wt_status==2'>
                            <span>{{'转移完成'}}</span> 
                        </div>
                        <div  v-else>
                            <span v-if='scope.row.status==1'>等待确认</span>
                            <el-link v-else :underline="false" type="primary"  @click="linkBtnFn('请确认',scope.row)" >{{'请您确认'}}</el-link>
                        </div>
                    </div>
                    <!--资产管理--资产盘点（操作） -->
                    <div v-else-if="item.prop=='linkOperateOfCheck'"> 
                        <div>
                            <el-link v-if='[1,3].indexOf(scope.row.c_is_start)>-1' :underline="false" type="primary"  @click="linkBtnFn('启动盘点',scope.row)" >{{'启动盘点'}}</el-link>
                            <span v-if='[1,3].indexOf(scope.row.c_is_start)>-1' style="color:#E9E9E9;padding:0 5px">|</span>
                            <el-link :underline="false" type="primary"  @click="linkBtnFn(scope.row.c_is_start==2?'暂停任务':scope.row.c_is_start==4?'盘点报表':'删除任务',scope.row)" >{{scope.row.c_is_start==2?'暂停任务':scope.row.c_is_start==4?'盘点报表':'删除任务'}}</el-link>
                        </div>
                    </div>



                     <div v-else-if="item.prop=='linkOperateOfMeterialList'">
                        <!-- <el-link :underline="false" type="primary" v-for="(opt,i) in item.linkList" :key="i"  @click="linkBtnFn(i==2&&scope.row.is_show==2?'上架':opt.label,scope.row)" >
                            <div class="popoverDiv" style="overflow:hidden" >
                                <span></span>
                                <span v-if="i<item.linkList.length-1" style="color:#E9E9E9;padding-left:5px">|</span>
                            </div>
                        </el-link> -->
                          <el-dropdown @command="(params)=>{linkBtnFn(params,scope.row)}" trigger="click">
                            <span class="el-dropdown-link">
                                更多操作<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <!-- @click="linkBtnFn(index==2&&scope.row.is_show==2?'上架':item.label,scope.row)" -->
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item v-for="(item,index) in item.linkList" :key="index"  :command="item.label">{{index==2&&scope.row.is_show==2?'上架':item.label}}</el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                    <!--耗材管理--领用记录（操作） -->
                    <div v-else-if="item.prop=='linkOperateOfMeterialRec'"> 
                        <div v-if='scope.row.re_status>2'>
                            <span :class="{color3:scope.row.re_status==3}">{{scope.row.re_status_name}}</span> 
                        </div>
                        <div  v-else>
                            <span :class="{color1:scope.row.re_status==1}">{{scope.row.re_status==1?'待审批':'已审批'}}</span>
                            <span style="color:#E9E9E9;padding:0 5px">|</span>
                            <el-link  :underline="false" type="primary" :disabled="scope.row.re_status==1"  @click="linkBtnFn('请确认',scope.row)" >{{'请确认'}}</el-link>
                        </div>
                    </div>
                    <!-- 能跳转详情a链接 -->
                    <el-link v-else-if="item.islink" type="primary" @click="$router.push({path:item.routeName||'/assetDetail',query:{name:$route.meta.title,id:scope.row[item.idName||'f_id']}})" :underline="false">{{scope.row[item.prop]}}</el-link>
                    <!-- 盘点状态 -->
                    <span v-else-if="item.prop=='is_check_name'" :class="{color1:scope.row.is_check_name=='未盘'}" >{{scope.row[item.prop]}}</span> 
                    <!-- 盘点结果 -->
                    <span v-else-if="item.prop=='check_res_name'"  :class="{color1:scope.row.check_res==4}">{{scope.row[item.prop]}}</span> 
                    <!-- 正常显示 -->
                    <span v-else >{{scope.row[item.prop]}}</span> 
                </template>
            </el-table-column>
        </template>
    </el-table>
  </div>
</template>

<script>
/* eslint-disable */ 
import {qrcode} from "@/api"
export default {
  name: 'LpjTableVue',
  props: {
      baseNum:Number,
      tableData:Array,
      tableHeaderData:Array,
      hasCheckBox:Boolean,
      rowKey:String,
      caozuo:String,
      hasLimit:Boolean,
  },
  data(){
    return {
        assetsNo:require("@/assets/images/assets-no.png"),
        qrcodeImg:require("@/assets/images/qrcodeImg.png"),
        islinkPopoverOpen:true,
        visible:false,
        isdisabled:'',
        qrCode:'',/**二维码 */
    }
  },
  created(){
  },
  watch:{
    
  },
  methods:{
      isShowFn(status,key){
         if(status == 1){// 闲置
           if(['update','issue','allot','delete','scrap'].indexOf(key) != -1){
              return true
           }
         }else if(status == 2){ //在用
           if(['update','transfer','withdraw'].indexOf(key) != -1){
              return true
           }
         }
      },
      getRowKey(row){
          return row[this.rowKey||'id']
      },
      getQrcode(id){
          this.qrCode = ''
          qrcode({id}).then(res=>{
            this.isdisabled = id
            this.qrCode =  res.qrcode
          })
      },
      /**初始化所有选中 */
      initSelect(){
          this.$refs.LpjTableVue.clearSelection()
      },
      /**表头单元格的 className 的回调方法 */
      tabelHeaderClassFn({row, column, rowIndex, columnIndex}){
        if(column.type=="selection"){ 
            return "tabel_Header_Class " 
        }else if(column.label=='图片'&&this.tableHeaderData[columnIndex].center){
            return "tabel_Header_Class "
        }else if(column.label=='操作'&&this.tableHeaderData[columnIndex].center){
            return "tabel_Header_Class "
        }else{
            return "tabel_Header_Class"
        } 
      },
      checkboxT(row, index){
        //   if(this.$route.name=='meterialAddWarehouse'&&this.hasLimit){
        //       return row.status=== `已入库`?true:false
        //   }else{
        //       return true
        //   }
      },
      /**表格数据筛选*/
      filterMethodFn(value, row, column){
            // const property = column['property'];
            // return row[property] == value;
      },
      /**表格筛选条件变化 */
      handleFilterChange(filters){
      },
      /*表格数据变化*/
    selectionChangeFn(selection){
      this.$emit("selectionFn",selection)
    },
    /*获取全部被选中*/
    selectAllFn(selection){
      this.handleSelectionChange(selection)
    },
    /*获取单个被选中的checkBox*/
    handleSelectionChange(selection,row){
      selection.forEach((item,i)=>{
        Object.assign(item,{index:i})
      })
      this.$emit('handleSelectionChange',selection) 
    },
    /**操作link标签被点击时事件 */
    linkBtnFn(val,data){
        console.log('进来了')
        this.islinkPopoverOpen = true
        this.$emit('linkBtnFn',val,data)
    },
    /**操作link按钮弹窗取消 */
    linkCancelPopover(val,data){
        this.islinkPopoverOpen = false;
    },
    /**操作link按钮弹窗确定 */
    linkSurePopover(val,data){
        this.islinkPopoverOpen = false;
        this.$emit('linkSurePopover',val,data)
    },
  }
}
</script>

<style lang="stylus" scoped>
.LpjTableVue
    font-size 14px
    color #606266 
    text-align: center;
    border: 1px solid rgba(245, 245, 245, 1);
    .color1
        color: rgba(255, 102, 102, 1);
    .color2
        color: #FF9E6D 
    .color3
        color:#74CE57 
    .color4
        color: #101010
    >>>.tabel_Header_Class 
        background-color rgba(246, 246, 246, 1);
        height 31px
        padding 0
        color: rgba(25, 31, 37, 1);
        font-size: 16px;
        text-align: center;
        font-family: SourceHanSansSC-regular;
    >>>a
        padding 0 3px
        span
          font-size 12px !important
    >>>.el-table__row--striped 
        td
            background rgb(251,251,253) !important
            div 
              font-size 12px
              span
               font-size 12px
    >>>.el-table__row
        td
            padding 0   
            color: rgba(16, 16, 16, 1);
            font-size 12px
            text-align: center;
            font-family: SourceHanSansSC-regular;
            div
              font-size 12px
              span
               font-size 12px
</style>
<style lang="stylus">
.el-dropdown-menu
    width 65px
    text-align center
.LpjTableVue
    .el-dropdown-link
        cursor pointer
        color #409EFF
    .el-icon-arrow-down
        font-size 12px
    .el-dropdown-link
        color #606266
    .el-dropdown-link:hover
        color #409eff
    .el-table th .cell
        font-weight 600
    .el-table td .cell
    .el-table .cell
        height 40px
        line-height 40px
        font-size 12px
        color rgba(96, 98, 102, 1)
        font-family SourceHanSansSC-bold
        >div 
            display flex
            align-items center
            justify-content center
            >div 
                display flex
                align-items center
                justify-content center
</style>








